<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="title">漫画阅读器</text>
      <text class="chapter" @click="showChapters">第{{ currentChapter + 1 }}章</text>
    </view>

    <!-- 漫画内容区域 -->
    <scroll-view 
      class="comic-area" 
      scroll-y
      :scroll-top="scrollTop"
    >
      <image 
        v-for="(page, index) in currentPages" 
        :key="index"
        :src="page" 
        mode="widthFix" 
        class="comic-page"
      />
    </scroll-view>

    <!-- 底部控制条 -->
    <view class="control-bar">
      <button class="btn" @click="prevPage" :disabled="currentPage === 0">上一页</button>
      <text class="page-info">{{ currentPage + 1 }} / {{ totalPages }}</text>
      <button class="btn" @click="nextPage" :disabled="currentPage === totalPages - 1">下一页</button>
    </view>

    <!-- 章节选择弹窗 -->
    <uni-popup ref="chaptersPopup" type="bottom">
      <view class="chapter-list">
        <text 
          v-for="(chapter, index) in chapters" 
          :key="index"
          class="chapter-item" 
          :class="{ active: index === currentChapter }"
          @click="selectChapter(index)"
        >
          第{{ index + 1 }}章 {{ chapter.title }}
        </text>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟数据
const chapters = ref([
  {
    title: '冒险的开始',
    pages: [
      '/static/images/mh01/01.jpg',
	  '/static/images/mh01/02.jpg',
	  '/static/images/mh01/03.jpg',
	  '/static/images/mh01/04.jpg',
	  '/static/images/mh01/05.jpg',
	  '/static/images/mh01/06.jpg',
	  '/static/images/mh01/07.jpg',
	  '/static/images/mh01/08.jpg',
	  '/static/images/mh01/09.jpg'
    ]
  }
]);

// 当前状态
const currentChapter = ref(0);
const currentPage = ref(0);
const scrollTop = ref(0);

// 计算属性
const currentPages = computed(() => chapters.value[currentChapter.value].pages);
const totalPages = computed(() => currentPages.value.length);

// 翻页操作
const prevPage = () => {
  if (currentPage.value > 0) {
    currentPage.value--;
    scrollTop.value = 0;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) {
    currentPage.value++;
    scrollTop.value = 0;
  }
};

// 章节选择
const showChapters = () => {
  chaptersPopup.value.open();
};

const selectChapter = (index) => {
  currentChapter.value = index;
  currentPage.value = 0;
  chaptersPopup.value.close();
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a;
}

.nav-bar {
  padding: 20rpx;
  background-color: #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .title {
    color: #fff;
    font-size: 36rpx;
  }
  
  .chapter {
    color: #4cd964;
    font-size: 32rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    border: 1rpx solid #4cd964;
  }
}

.comic-area {
  flex: 1;
  background-color: #000;
  
  .comic-page {
    width: 100%;
    display: block;
  }
}

.control-bar {
  height: 100rpx;
  background-color: rgba(42, 42, 42, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  
  .btn {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    background-color: #4cd964;
    border-radius: 40rpx;
    
    &[disabled] {
      background-color: #666;
      opacity: 0.6;
    }
  }
  
  .page-info {
    color: #fff;
    font-size: 32rpx;
  }
}

.chapter-list {
  background-color: #2a2a2a;
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
  
  .chapter-item {
    display: block;
    padding: 30rpx;
    color: #fff;
    font-size: 32rpx;
    border-bottom: 1rpx solid #444;
    
    &.active {
      color: #4cd964;
    }
  }
}
</style>